<template>
	<view class="detail">
		<u-modal :show="show" :title="title" showCancelButton="true" @confirm="confirm" @cancel="cancel">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
				<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.name" border="none" placeholder="两人则这样输入 孩子一,孩子二"></u--input>
				</u-form-item>
				<u-form-item label="人数" prop="userInfo.child" borderBottom ref="item1">

					<u-radio-group v-model="model1.userInfo.child">
						<u-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.name">
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item label="手机" prop="userInfo.mobile" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.mobile" border="none" disabled="true"></u--input>

					<u-button type="success" size="mini" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
						slot="right">获取手机号</u-button>



				</u-form-item>
			</u--form>

		</u-modal>
		<view class="appli">
			已报名的人：
			<view v-if="show2">暂无人报名刚快报名吧</view>

			<view v-else class="item" v-for="(item,index) in list">
				<view class="img">
					<u-image :showLoading="true" radius="25rpx" :src="item.avatar_url" width="120rpx" height="120rpx">
					</u-image>
				</view>
				<view class="text">
					<view class="text1">
						{{item.name}}
					</view>
					<view class="text2">
						号码:{{item.mobile | phoneFilter}}
					</view>
					<view class="text3">
						报名时间:{{ dateFormat(item.application_time)  }}
					</view>
				</view>
			</view>
			<view class="butt" @click="but()">
				<u-button type="primary" :text="text" :disabled="residue"></u-button>
			</view>

		</view>
		<u-popup :show="show1" mode="center" :round="10">
			<view style="width: 400rpx; height: 150rpx; line-height: 100rpx;text-align: center;">
				<h1>报名中请等待结果:</h1>
				<view>
					{{text1}}
				</view>

			</view>

		</u-popup>
	</view>
</template>

<script>
	import {
		getrename,
		getappli,
		getPhone,
		getisappli,
		send,
	} from "@/api/index.js"
	export default {
		data() {
			return {
				list: [],
				text: '',
				text1: '',
				residue: false,
				show: false,
				show1: false,
				show2: false,
				title: '报名信息填写',
				model1: {
					userInfo: {
						name: '',
						mobile: '',
						child: '1'
					},
				},
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.mobile': {
						type: 'string',
						required: true,
						message: '请获取手机号',
						trigger: ['blur', 'change']
					},
				},
				radiolist1: [{
						name: '1',
						disabled: false
					},
					{
						name: '2',
						disabled: false
					}
				],
				makeTimeId: '',
				tmplIds: ["2bDYbmltCFOOkTGKL-ZBngsgrWHAEndZaeg4QrTgdLQ"], //数组
				exist: false
			};
		},
		onLoad(option) {
			this.makeTimeId = option.makeTimeId
			this.getrenames(option.makeTimeId)
			let app = getApp();
			this.userLoginFlag = app.globalData.userLogin;
			console.log(app.globalData.userLogin);
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			but() {
				if (this.exist == true) {
					uni.showToast({
						title: "请勿重复报名",
						duration: 2000,
						icon: "error"
				
					})
					return false;
				}
				this.show = true
				
			},
			async getPhoneNumber(e) {
				console.log(e);
				const {
					data,
					status,
					msg
				} = await getPhone({
					code: e.detail.code
				})
				if (status == 200) {
					this.model1.userInfo.mobile = data
				}

			},
			async getrenames(e) {

				const {
					data,
					status,
					msg
				} = await getrename({
					params: {
						makeTimeId: e
					}
				})
				console.log(data);
				if (status == 200) {

					this.list = data
					for (let i in data) {

						if (data[i].open_id == uni.getStorageSync("openid")) {
							this.exist = true
						}
					}
					console.log(this.list.length);
					if (this.list.length != 0) {
						this.text = "报名剩余名额" + this.list[this.list.length - 1].limit_residue
						if (this.list[this.list.length - 1].limit_residue == 0) {
							this.residue = true
							this.text = '人数以达上限'
						}
					} else {
						this.text = "报名剩余名额充足"
						this.show2 = true
					}


				}
			},
			async getapplis() {
				console.log(uni.getStorageSync("openid"));
				const {
					data,
					status,
					msg
				} = await getisappli({

					name: this.model1.userInfo.name,
					mobile: this.model1.userInfo.mobile,
					maketimeId: this.makeTimeId,
					child: this.model1.userInfo.child,
					openid: uni.getStorageSync("openid")


				})

				if (status == 200) {
					this.text1 = "报名成功"
					this.gomsg()




				} else {
					this.text1 = "网络慢请重试"
					setTimeout(() => {
						// 3秒后自动关闭
						this.show1 = false;
					}, 500)


				}
			},
			async gomsg() {
				console.log("xxxsadas")
				let openid = uni.getStorageSync("openid")

				const {
					data,
					status,
					msg
				} = await send({
					params: {
						openid
					}
				})

				if (status == 200) {
					uni.requestSubscribeMessage({
						tmplIds: this.tmplIds,
						success: (res) => {
							setTimeout(() => {
								// 3秒后自动关闭
								this.show1 = false;
								var pages = getCurrentPages(); //获取所有页面的数组对象
								var currPage = pages[pages.length - 1]; //当前页面
								uni.reLaunch({
									url: currPage.$page.fullPath
								})
							}, 500)
							console.log(res)
						},
						fail: (err) => {
							console.log(err);
						},

						complete: (com) => {
							setTimeout(() => {
								// 3秒后自动关闭
								this.show1 = false;
								var pages = getCurrentPages(); //获取所有页面的数组对象
								var currPage = pages[pages.length - 1]; //当前页面
								uni.reLaunch({
									url: currPage.$page.fullPath
								})
							}, 500)
							console.log(com);
						}
					})

				}
			},
			cancel() {

				this.show = false
			},
			confirm() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					this.getapplis()
					this.show = false
					this.show1 = true



				}).catch(errors => {
					uni.$u.toast('校验失败')
					return
				})

			},
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				// return year + "-" + month + "-" + day;
			}
		},
		// 加密手机号
		filters: {
			phoneFilter(val) {
				let reg = /^(.{3}).*(.{4})$/;
				return val.replace(reg, '$1****$2');
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #4f4a73;
		height: 100vh;
	}

	.detail {
		background-color: #4f4a73;
		height: 100vh;
	}

	.appli {
		background-color: #4f4a73;
		padding-bottom: 40rpx;

		background-color: #fff;
		width: 95%;
		margin: 40rpx auto;
		border-radius: 25rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.item {
			margin-top: 40rpx;
			display: flex;

			.text {
				margin-left: 40rpx;

				.text1 {
					font-size: 32rpx;
					font-weight: 700;
				}

				.text2 {
					color: $u-content-color;

				}

				.text3 {
					color: $u-content-color;
				}
			}
		}
	}

	.butt {
		position: fixed;
		bottom: 40rpx;
		width: 90%;
		height: 100rpx;
	}
</style>
